import classNames from "classnames";
import {CloseOutlined} from "@ant-design/icons";
import {type TabItem} from "@/types/tab";
import styles from './styles.module.scss';
import {MenuItem} from "@/types/menu";

type Props = {
  active?: boolean;
  onClick?: () => void;
  onClose?: () => void;
  unclosable?: MenuItem['unclosable'];
}

export function TabItem(props: TabItem & Props) {
  return (
    <div className={classNames(styles.tabItem, props.active ? styles.active : null, props.unclosable ? null : styles.closable)} onClick={props.onClick}>
      <div>{props.label}</div>
      {!props.unclosable && <div className={styles.btn}><CloseOutlined style={{fontSize: '12px'}}/></div>}
    </div>
  );
}
